<template>
	<view>
	<scroll-view style="height: auto" scroll-y="true">
		<form @submit="saveinfo">
			<view class="problem">
				<view class="problem-title">请选择投诉类型</view>
				<view class="problem-item">
					<view class="problen-atom" v-for="(item,index) in problemlist" :key="index" @click="current=index">
						<text>{{item}}</text>
						<image v-if="index===current" class="seleteds" src="../../static/image/rz.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<view class="describe">
				<view class="describe-title">问题描述</view>
				<view class="describe-box">
					<textarea name="description" maxlength="255" placeholder-style="color:#cecece" placeholder="请详细描述问题以便我们尽快处理"></textarea>
					<uploadimgs :imgnum="imgnum" :imglist="thumb" ref="uploadimgs"></uploadimgs>
				</view>
			</view>
			<view class="tel">
				<text>联系方式：</text>
				<input name="contact" maxlength="11" type="text" placeholder="请输入微信号或手机" />
			</view>
			
		<!-- 	<view class="save-button" @click="saveinfo">保存</view> -->
			<button class="save-button" form-type="submit">提交</button>
			</form>
			<view style="height: 30rpx;"></view>
	</scroll-view>
		<globallogin :globalislogin="globalislogin"></globallogin> 
	</view>
</template>

<script>
	/**
	 * 投诉
	 */
	export default{
		data(){
			return{
				globalislogin:false,
				problemlist:['虚假抽奖','恶意营销','伪冒侵权','政治敏感','其他违规','诱导分享'],
				current:0,
				imgnum:4,//最大上传的图片数量
				thumb:[],
			}
		},
		onLoad() {
			if(this.$Logintip()){
				this.globalislogin = true 
			}
		},
		methods:{
			saveinfo(e){
				let form  = e.detail.value;
				form.type = 'complaint';
				form.title=this.problemlist[this.current];
				form.thumb = this.thumb;
				if(!form.description){
					this.$ShowMsg('请简单描述一下你要投诉的内容！');
					return;
				}
				if(!form.contact){
					this.$ShowMsg('请填写联系方式！');
					return;
				}
				this.$HttRequest({
						url: '/feedback/add',
						param:form
					},'POST',true).then((res) => {
						if (res.status === 10000) {
							this.$ShowMsg('我们已收到您的投诉，如有结果我们第一时间通知您！')
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					});
				}
			}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}
	.save-button{
		margin: 20rpx auto;
		width: 95%;
		height: 90rpx;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 40rpx;
		
	}
	.describe{
		width: 95%;
		
		margin: 0 auto;
		margin-bottom: 20rpx;
		.describe-title{
			color: #808080;
			flex: 1;
		
			height: 80rpx;
			font-size: 26rpx;
			display: flex;
			justify-content:  flex-start;
			align-items:center ;
		}
		.describe-box{
			background-color: #fff;
			border-radius: 10rpx;
			flex: 1;
			padding: 20rpx;
			.area{
				width: 100%;
			}
		}
	}
	.tel{
		flex: 1;
		background-color: #fff;
		padding-left: 20rpx;
		font-size: 28rpx;
		justify-content: flex-start;
		align-items: center;
		display: flex;
		height: 100rpx;
	}
	.problem{
		flex: 1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		.problem-title{
			font-size: 26rpx;
			color: #808080;
			margin: 0 auto;
			width: 95%;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.problem-item{
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			background-color: #fff;
			.problen-atom{
				border-bottom:1rpx solid #f2f2f2;
				width: 95vw;
				display: flex;
				justify-content:  space-between;
				align-items: center;
				height: 80rpx;
				padding:0 20rpx;
				.seleteds{
					width: 35rpx;
					height: 35rpx;
				}
			}
		}
	}
	
</style>
